<template>
    <div class="date-container">
        <div class="date-wrap">
            <template v-for="(day, index) in calendar_days">
                <div class="date-day">
                    <div
                        class="date-week"
                    >{{ index < 7 ? '周' + convertToChineseDay(day.day()) : '' }}</div>
                    <div
                        class="date-date"
                        :class="{ today: now.isSame(day, 'D'),  'select-day': currentDay.isSame(day, 'D') }"
                        @click.stop="setDay(day.valueOf())"
                    >
                        {{
                            day.format('DD')
                        }}
                    </div>
                    <div class="date-todu-list">
                        <!-- <div class="date-todu"></div> -->
                    </div>
                </div>
            </template>
        </div>
        <div class="drag-down" @click="updateDateState"></div>
    </div>
</template>
<script setup>
import { ref, inject, computed, onBeforeMount } from 'vue'
import { useStore } from 'vuex';
import dayjs from "dayjs"

const { state, updateDateState } = inject('DateState');
const store = useStore()

// 今天
const now = ref(dayjs())
const currentDay = computed(() => dayjs(store.state.day.currentDay))

// 日历日期列表
const calendar_days = ref([]);

// 转换星期
function convertToChineseDay(number) {
    var N = [
        "日", "一", "二", "三", "四", "五", "六"
    ];
    return N[number]

}

function setDay(day) {
    store.dispatch('day/setCurrentDay', day)
    setDateCalendar()
}

// 日期列表
function setDateCalendar() {
    calendar_days.value = []
    let firstDay = currentDay.value.clone();
    let firstDayWeek = firstDay.day();
    let endDayWeek = firstDay.day();
    let i = 0;

    while (i < firstDayWeek) {
        calendar_days.value.push(firstDay.subtract(firstDayWeek - i, 'day'));
        i++;
    }

    while (endDayWeek <= 6) {
        calendar_days.value.push(firstDay);
        firstDay = firstDay.add(1, 'day')
        endDayWeek++;
    }
}

onBeforeMount(setDateCalendar)

</script>
<script>
export default {
    name: "DateClose",
}
</script>
<style lang="scss" scoped>
.date-container {
    background-color: white;
    border-radius: 20px;
    height: 118px;
    // width: 932px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    box-shadow: var(--box-shadow);

    .date-wrap {
        // padding: 0 134px;
        display: flex;

        .grey-day {
            color: #707070 !important;
        }

        .date-day {
            // height: 60px;
            width: 40px;
            box-sizing: border-box;
            font-size: 16px;
            text-align: center;
            margin: 0 28px;
            color: black;
            aspect-ratio: 1/1;

            .date-date {
                // width: 40px;
                line-height: 40px;
                margin: 9px 0 2px;
                font-size: 24px;
                font-weight: bolder;
                border-radius: 50%;
                box-sizing: border-box;
                aspect-ratio: 1/1;
                cursor: pointer;
                &:hover {
                    // background-color: #ffeb3b;
                    background-color: #c4c4c4;
                }
            }

            .today {
                background-color: #ffeb3b !important;
            }

            .select-day {
                // box-sizing: border-box;
                background-color: #c4c4c4;
            }

            .date-todu-list {
                display: flex;
                justify-content: center;

                .date-todu {
                    width: 5px;
                    height: auto;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    border: 2px solid black;
                }
            }
        }
    }

    .drag-down {
        width: 45px;
        height: 6px;
        // border: 3px solid rgb(116, 116, 116);
        background-color: rgb(116, 116, 116);
        border-radius: 3px;
    }
}
</style>
